<template>
  <div class="box">
    <div id="" style="margin-bottom: 30px;">
      <el-button :type="type=='数据服务使用方管理'?'primary':''" v-has @click="type='数据服务使用方管理'">数据服务使用方管理</el-button>
      <el-button :type="type=='数据服务资源申请'?'primary':''" v-has @click="type='数据服务资源申请'">数据服务资源申请</el-button>
      <el-button :type="type=='数据服务资源审批'?'primary':''" v-has @click="type='数据服务资源审批'">数据服务资源审批</el-button>
    </div>

    <template v-if="type=='数据服务使用方管理'">
      <el-table :data="tableData1" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='数据服务资源申请'">
      <el-table :data="tableData2" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper2'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" @click="scope.row[item.title]?null:open()">
                {{scope.row[item.title]?'已申请':'提交申请'}}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='数据服务资源审批'">
      <el-table :data="isApply?tableData3:[]" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead3" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper3'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]==0" @click="agree">同意</el-button>
              <el-button type="danger" size="mini" v-if="scope.row[item.title]==0" @click="reject">拒绝</el-button>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]==1">已同意</el-button>
              <el-button type="danger" size="mini" v-if="scope.row[item.title]==2">已拒绝</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        isApply: false,
        ruleForm: {},
        formData: {},
        ruleForm1: {},
        formData1: {},
        ruleForm2: {},
        formData2: {},
        fileList: [],
        type: '数据导入',
        tableHead1: [{
            id: 1,
            label: "步骤名称",
            title: "stepName",
          },
          {
            id: 2,
            label: "URL",
            title: "url",
          },
          {
            id: 3,
            label: "Method field name",
            title: "mfn",
          },
          {
            id: 4,
            label: "Application Type",
            title: "at",
          },
          {
            id: 8,
            label: "Result field name",
            title: "rfn",
          },
          {
            id: 5,
            label: "HTTP status code field name",
            title: "hscfn",
          },
          {
            id: 6,
            label: "Response time field",
            title: "rtf",
          },
          {
            id: 7,
            label: "Response header field",
            title: "rhf",
          }
        ],
        tableData1: [{
          stepName: "REST Client",
          url: '192.168.0.12',
          mfn: '133912',
          at: 'TEXT PLAIN',
          rfn: 'result',
          hscfn: 's',
          rtf: 's',
          rhf: '1'
        }],

        formData: {},

        tableHead2: [{
            id: 1,
            label: "申请标题",
            title: "title",
          },
          {
            id: 2,
            label: "申请内容",
            title: "content",
          },
          {
            id: 3,
            label: "操作",
            title: "oper2",
          }
        ],
        tableData2: [{
          title: "资源申请-调用121234资源",
          content: '调用121234资源以满足流程需要',
          oper2: false
        }],

        tableData3: [{
          title: "资源申请-调用121234资源",
          content: '调用121234资源以满足流程需要',
          oper3: 0
        }],
        tableHead3: [{
            id: 1,
            label: "申请标题",
            title: "title",
          },
          {
            id: 2,
            label: "申请内容",
            title: "content",
          },
          {
            id: 3,
            label: "操作",
            title: "oper3",
          }
        ]
      };
    },
    computed: {
      uploadFile() {
        return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
      },
      headers() {
        const head = {
          token: this.$store.getters.token,
        };
        return head;
      },
    },
    methods: {
      submitForm() {
        this.$message({
          type: "success",
          message: '上传目录成功'
        })
      },
      resetForm() {

      },
      open(e) {
        this.$confirm('你将申请此项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '申请成功!'
          });
          this.tableData2[0].oper2 = true
          this.isApply = true
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消申请'
          });
          this.tableData2.oper2 = false
          this.isApply = false
        });
      },
      agree() {
        this.$confirm('你将同意此申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已同意!'
          });
          this.tableData3[0].oper3 = 1
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      reject() {
        this.$confirm('你将拒绝此申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已拒绝!'
          });
          this.tableData3[0].oper3 = 2
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }
</style>
